<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"/>
    <script src="/easyui/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
    <title>数据中间件系统</title>
</head>
<style>
    html, body {
        height: 100%;
    }

    #sqlImportAddTable {
        margin-left: 20%;
        margin-right: 20%;
    }

    #sqlDialog {
        margin-top: 10px;
        height: 400px;
        width: 600px;
    }
</style>
<body>
<div class="easyui-layout" style="height: 100%">
    <div id="sqlDialog">
        <form id="myForm">
            <table id="sqlImportAddTable" cellspacing="10" cellpadding="0">
                <tr>
                    <td><p>采集周期</p><input type="hidden" id="id"><input id="frequency" class="easyui-textbox"
                                                                       required="true" type="text"></td>
                    <td><p>源URL</p><input type="text" class="easyui-textbox" required="true" id="url"></td>
                </tr>
                <tr>
                    <td><p>用户名</p><input type="text" class="easyui-textbox" required="true" id="username"></td>
                    <td><p>密码</p><input type="password" class="easyui-textbox" required="true" id="pwd"></td>
                </tr>
                <tr>
                    <td><p>标签</p><input type="text" class="easyui-textbox" required="true" id="label"></td>
                    <td><p>输出表名</p><input type="text" class="easyui-textbox" required="true" id="table"></td>
                </tr>
                <tr>
                    <td><p>数据源</p>
                        <select id="datasource" class="easyui-combobox" data-options="panelHeight:'auto'" required="true" style="width: 100px">
                            <option value="MySql">MySql</option>
                            <option value="Oracle">Oracle</option>
                        </select></td>
                    <td></td>
                </tr>
            </table>
            <input class="easyui-textbox" style="height:311px;width:100%;margin-left: 10%;margin-right: 10%" id="sqlstr" name="sqlstr" required="true" data-options="multiline:true"></input>
            <!--<textarea class="easyui-textbox" required="true"-->
                      <!--style="height:311px;width:100%;margin-left: 10%;margin-right: 10%" id="sqlstr" multiline="true"-->
                      <!--placeholder="请输入SQL导入语句"></textarea>-->
        </form>
    </div>

    <div id="sqlImportDataGridDiv" region="center">
        <table id="sqlImportDataGrid"></table>
    </div>
</div>
</body>
<script>

    $("#sqlImportDataGrid").datagrid({
        rownumbers: true,
        singleSelect: false,
        striped: true,
        fit: true,
        url: '/import?dataSource=idc',
        method: "get",
        // 注意 两个数组
        columns: [
            [{field: 'checkbox', checkbox: true}, {
                field: 'label',
                title: '标签',
                width: '16%'
            },
                {
                    field: 'frequency',
                    title: '采集频率',
                    width: '16%'
                },
                {
                    field: 'datasource',
                    title: '数据源',
                    width: '16%'
                },
                {
                    field: 'url',
                    title: '数据URL',
                    width: '16%',
                },
                {
                    field: 'schema_',
                    title: 'SCHEMA',
                    width: '16%'
                },
                {
                    field: 'tableName',
                    title: '输出表名',
                    width: '21%'
                }
            ]
        ],
        fitColumns: true,
        autoRowHeight: false,
        loadMsg: '数据加载中。。。',
        pagination: true,
        toolbar: [{
            iconCls: 'icon-add',
            text: '新增',
            handler: add
        }, '-', {
            iconCls: 'icon-edit',
            text: '编辑',
            handler: edit
        }, '-', {
            iconCls: 'icon-remove',
            text: '删除',
            handler: remove
        }]
    });

    $("#sqlDialog").dialog({
        maximizable: true,
        resizable: true,
        collapsible: true,
        closed: true,
        buttons: [
            {
                text: '重置',
                iconCls: 'icon-cancel',
                handler: clearAll
            }, {
                text: '保存',
                iconCls: 'icon-save',
                handler: saveRecord
            }]
    });

    var submitUrl = "";

    function saveRecord() {
        var frequency = $('#frequency').val();
        var url= $('#url').val();
        var  username= $('#username').val();
        var  pwd= $('#pwd').val();
        var  label= $('#label').val();
        var   tableName= $('#table').val();
        var   sqlstr= $('#sqlstr').val();
        var  id= $('#id').val();
        var  datasource= $('#datasource').val();

        if(frequency == ''){
            $.messager.show({
                title: '提示',
                msg: '采集周期不能为空',
                timeout: 1000
            });
            return false;
        }else if(url == ''){
            $.messager.show({
                title: '提示',
                msg: '源URL不能为空',
                timeout: 1000
            });
            return false;
        }else if(username == ''){
            $.messager.show({
                title: '提示',
                msg: '用户名不能为空',
                timeout: 1000
            });
            return false;
        }else if(pwd == ''){
            $.messager.show({
                title: '提示',
                msg: '密码不能为空',
                timeout: 1000
            });
            return false;
        }else if(label == ''){
            $.messager.show({
                title: '提示',
                msg: '标签不能为空',
                timeout: 1000
            });
            return false;
        }else if(tableName == ''){
            $.messager.show({
                title: '提示',
                msg: '输出表名不能为空',
                timeout: 1000
            });
            return false;
        }else if(datasource == '' || datasource == null){
            $.messager.show({
                title: '提示',
                msg: '请选择数据源',
                timeout: 1000
            });
            return false;
        }else if(sqlstr == ''){
            $.messager.show({
                title: '提示',
                msg: 'SQL不能为空',
                timeout: 1000
            });
            return false;
        }


        var configData = {
            frequency: frequency,
            url: url,
            username: username,
            pwd: pwd,
            label: label,
            tableName: tableName,
            sqlstr: sqlstr,
            id: id,
            datasource: datasource
        };
        $.ajax({
            type: 'post',
            url: submitUrl,
            data: JSON.stringify(configData),
            cache: false,
            dataType: "json",
            contentType: "application/json",
            success: function (data) {
                if (data.status == 1) {
                    $.messager.show({
                        title: '提示',
                        msg: data.msg,
                        timeout: 1000
                    });
                } else {
                    $.messager.show({
                        title: '提示',
                        msg: data.msg,
                        timeout: 3000
                    });
                }
                $("#sqlDialog").dialog('close');
                $("#sqlImportDataGrid").datagrid('reload');
            },
            error: function (data) {
                $.messager.alert("错误", "系统发生错误，请联系管理员!", "error");
            }
        });
    }

    function add() {
        submitUrl = "/import";
        $('#myForm').form("clear");
        $("#sqlDialog").dialog('open').dialog('setTitle', '新增SQL定时导入');
    }

    function edit() {
        var record = $("#sqlImportDataGrid").datagrid('getChecked');
        if (record.length == 0) {
            $.messager.show({
                title: "提示",
                msg: "请选择一条记录！",
                timeout: 1000
            });
        } else if (record.length > 1) {
            $.messager.show({
                title: "提示",
                msg: "只能选择一条记录！",
                timeout: 1000
            });
        } else {
            submitUrl = "/import";
            $("#sqlDialog").dialog("open").dialog("setTitle", "编辑SQL定时导入");
            // $("#myForm").form("load", record);
            $("#id").val(record[0].id);
            $("#frequency").textbox("setValue", record[0].frequency);
            $("#url").textbox("setValue", record[0].url);
            $("#username").textbox("setValue", record[0].username);
            $("#pwd").textbox("setValue", record[0].pwd);
            $("#label").textbox("setValue", record[0].label);
            $("#table").textbox("setValue", record[0].tableName);
            $("#sqlstr").textbox("setValue", record[0].sqlstr);
            $("#datasource").textbox("setValue", record[0].datasource);
        }
    }

    function remove() {
        var record = $("#sqlImportDataGrid").datagrid('getChecked');
        if(record.length == 0){
            $.messager.show({
                title:'提示',
                msg:'请选择一条数据',
                timeout:1000
            });
        }else{
            $.messager.confirm('提示', '确认删除选中的' + record.length + '条记录吗？删除后不可恢复！', function (r) {
                var ids = "";
                if (r) {
                    for (var i = 0; i < record.length; i++) {
                        if (i < record.length - 1) {
                            ids = ids + "'" + record[i].id + "',";
                        } else {
                            ids = ids + "'" + record[i].id + "'";
                        }
                    }
                    $.post("/cancelImportTask?ids=" + ids, function (data) {
                        $.messager.show({
                            title: "提示",
                            msg: data.msg,
                            timeout: 1000
                        });
                        $("#sqlImportDataGrid").datagrid('reload');
                    }, "json");
                    // $.ajax({
                    //     type: "POST",
                    //     url: "/cancelImportTask?id=" + record[i].id,
                    //     dataType: "text",
                    //     contentType: "text",
                    //     success: function (data) {
                    //         $.messager.show({
                    //             title: "提示",
                    //             msg: "删除成功！",
                    //             timeout: 1000
                    //         });
                    //     },
                    //     error: function (data) {
                    //         $.messager.alert("错误", "系统发生错误，请联系管理员!", "error");
                    //     }
                    // });
                }
            })
        }
    }

    function clearAll() {
        $(':input','#myForm').not(':button,:submit,:reset,:hidden').val('');
    }
</script>
</html>